import React from 'react'
import BoilingVerdict from './BoilingVerdict'
import TemperatureInput from './TemperatureInput'

class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {temperature: ''};
    }

    // Before Change
    // handleChange(value) {
    //     this.setState({temperature: e.target.value});
    // }

    // After Change
    handleChange(value) {
        this.setState({temperature: value})
    }

    render() {
        const temperature = this.state.temperature;
        return (
            <fieldset className={'container'}>
                {/*<legend>Enter temperature in Celsius:</legend>*/}
                {/*<input*/}
                    {/*value={temperature}*/}
                    {/*onChange={this.handleChange} />*/}

                <TemperatureInput scale="c" temperature={temperature}  onTemperatureChange={this.handleChange}/>

                <BoilingVerdict
                    celsius={parseFloat(temperature)} />

            </fieldset>
        );
    }
}

export default Calculator
